@charset 'utf-8';
// 定义常用margin、padding、font-size大小
@for $i from 0 through 60 {
    // 值仅支持被2或5整除
    @if $i % 2 == 0 or $i % 5 == 0 {
        // margin简写
        .margin-#{$i},
        .m-#{$i} {
            margin: $i + px;
        }
        // padding简写
        .padding-#{$i},
        .p-#{$i} {
            padding: $i + px;
        }
        // font-size值
        .font-#{$i} {
            font-size: $i + px;
        }

        //单独设置某个方向的margin和padding值
        @each $logogram, $fullName in (l, left) (r, right) (t, top) (b, bottom) {
            // 设置margin距离各个方向的值
            .margin-#{$fullName}-#{$i},
            .m#{$logogram}-#{$i} {
                margin-#{$fullName}: $i + px;
            }
            .mx-#{$i} {
                margin: $i + px auto;
            }
            .my-#{$i} {
                margin: auto $i + px;
            }
            // 设置padding距离各个方向的值
            .padding-#{$fullName}-#{$i},
            .p#{$logogram}-#{$i} {
                padding-#{$fullName}: $i + px;
            }
            .px-#{$i} {
                padding: $i + px auto;
            }
            .py-#{$i} {
                padding: auto $i + px;
            }
        }
    }
}

//单独设置某个方向的margin和padding值为auto
@each $logogram, $fullName in (l, left) (r, right) (t, top) (b, bottom) {
    // 设置margin距离各个方向的值
    .margin-#{$fullName}-auto,
    .m#{$logogram}-auto {
        margin-#{$fullName}: auto;
    }
    // 设置padding距离各个方向的值
    .padding-#{$fullName}-auto,
    .p#{$logogram}-auto {
        padding-#{$fullName}: auto;
    }
}

// 超出行数，自动显示行尾省略号，最多5行
@for $i from 1 through 5 {
    #overflow-omit#{$i} {
        @if $i == 1 {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        } @else {
            display: -webkit-box !important;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            -webkit-line-clamp: $i;
            -webkit-box-orient: vertical !important;
        }
    }
}

// flex
.flex {
    display: flex;
}
@for $i from 0 through 12 {
    .flex-#{$i} {
        flex: $i;
    }
}
$flex-fd: (
    row: row,
    row-reverse: row-reverse,
    column: column,
    column-reverse: column-reverse,
);
@each $key, $val in $flex-fd {
    .flex-fd-#{$key} {
        flex-direction: $val;
    }
}

$flex-fw: (
    nowrap: nowrap,
    wrap: wrap,
    wrap-reverse: wrap-reverse,
);

@each $key, $val in $flex-fw {
    .flex-fw-#{$key} {
        flex-wrap: $val;
    }
}
$flex-jc: (
    start: flex-start,
    end: flex-end,
    center: center,
    betwoon: space-betwoon,
    around: space-around,
);

@each $key, $val in $flex-jc {
    .flex-jc-#{$key} {
        justify-content: $val;
    }
}
$flex-ai: (
    start: flex-start,
    end: flex-end,
    center: center,
    baseline: baseline,
    stretch: stretch,
);

@each $key, $val in $flex-ai {
    .flex-ai-#{$key} {
        align-items: $val;
    }
}
$flex-ac: (
    start: flex-start,
    end: flex-end,
    center: center,
    betwoon: space-betwoon,
    around: space-around,
    stretch: stretch,
);
@each $key, $val in $flex-ac {
    .flex-ac-#{$key} {
        align-content: $val;
    }
}

@mixin flex($coor: null, $justify: null, $alignItems: null, $flexWrap: null, $alignContent: null) {
    display: flex;
    @if $coor {
        flex-direction: map-get($flex-fd, $coor);
    }
    @if $justify {
        justify-content: map-get($flex-jc, $justify);
    }
    @if $alignItems {
        align-items: map-get($flex-ai, $alignItems);
    }
    @if $flexWrap {
        flex-wrap: map-get($flex-fw, $flexWrap);
    }
    @if $alignContent {
        align-content: map-get($flex-ac, $alignContent);
    }
}